import React from 'react';
import { Icon } from 'antd';
import { FormHeader } from '../../components';

const CollapseHeader = ({ title, children, style }) => {
    const [expand, setExpand] = React.useState(true);

    return (
        <div style={{ position: 'relative' }}>
            <FormHeader title={title} />
            <a
                style={{
                    position: 'absolute',
                    right: 0,
                    top: 0
                }}
                onClick={e => {
                    e.preventDefault();
                    setExpand(!expand);
                }}
            >
                {expand ? '收起' : '展开'}
                <Icon type={expand ? 'caret-up' : 'caret-down'} style={{ marginLeft: 4 }} />
            </a>
            <div style={{ display: expand ? 'block' : 'none', ...style }}>{children}</div>
        </div>
    );
};

export default CollapseHeader;
